<template>
    <div>
        <MymHeader></MymHeader>
        <div class="main-container">
            <van-row>
                <van-col span="6">
                    <van-sidebar v-model="activeKey">
                        <van-sidebar-item v-for="(c,index) in catalogList" :title="c.cname" @click="showCourseList(c.id)"/>
                    </van-sidebar>
                </van-col>
                <van-col span="18">
                    <div>
                        <van-card style="background: #fafafa" v-for="(course,index) in courseList" :key="index">
                            <template #tags>
                                <div style="text-align: center; background: #fafafa">
                                    <div style="width: 100%;">
                                        <van-image
                                                radius="5px"
                                                width="220px"
                                                height="140px"
                                                fit="cover"
                                                :src="course.logo"
                                                alt="缺省图"
                                                @click="showCourseDetail(course.cid,course.aid)"

                                        />
                                    </div>
                                </div>
                            </template>
                        </van-card>

                    </div>
                </van-col>
            </van-row>
        </div>
        <MymNavBar></MymNavBar>
    </div>
</template>

<script>
    import MymNavBar from "@/components/mobile/MymNavBar";
    import MymHeader from "@/components/mobile/MymHeader";
    import request from "@/util/request";

    export default {
        name: "MymCourseList",
        components: {
            MymNavBar,
            MymHeader
        },
        data() {
            return {
                activeKey: 0,
                catalogList: [],
                courseList:[]
            }
        },
        mounted() {
            this.initFirstCourseList();
        },

        methods: {

            async initFirstCourseList(){
                let cid = await this.initCatalogList();
                await this.showCourseList(cid);
            },

            async initCatalogList() {
                let id = '';
                await request.get('/blog/catalog/').then(resp => {
                    if (resp.data.code === 200) {
                        this.catalogList = resp.data.data;
                        id = this.catalogList[0].id;
                        console.log('获得分类的id:'+id);
                    }
                }).catch(err => {
                    console.log(err);
                })
                return id;
            },

            async showCourseList(cid){
                console.log("执行showCourseList=>cid:"+cid);
                await request.get('/blog/course/'+cid).then(resp => {
                    if (resp.data.code === 200) {
                        //console.log(resp.data.data);
                        this.courseList = resp.data.data;
                    }else{
                        this.courseList = [];
                    }
                }).catch(err => {
                    console.log(err);
                })
            },

            showCourseDetail(cid,aid){
                //this.$toast('显示最新课程详情....');
                window.location.href='/mCourseDetails?cid='+cid+'&aid='+aid;
            }
        }
    }
</script>

<style scoped>
    .main-container {
        padding-bottom: 60px;
    }
</style>